<template>

    <v-dialog v-model="dialog" persistent max-width="350" transition="slide-x-reverse-transition">
      <v-card>
        <v-card-title class="d-flex justify-space-between">
          <span class="headline">{{diastatus == 1 ? "登录" : diastatus == 2 ? "注册" : "忘记密码"}}</span>
          <span class="headline" @click="closeDialog"><v-icon size="30">mdi-close</v-icon></span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row no-gutters>
              <v-col cols="12" v-if="diastatus == 1">
                <v-text-field label="请输入用户名/邮箱" required></v-text-field>
              </v-col>
             <v-col cols="12" v-if="diastatus == 2">
                <v-text-field
                  label="用户名"
                  type="text"
                  counter
                  maxlength="10"
                  required
                ></v-text-field>
              </v-col>
             <v-col cols="12" v-if="diastatus != 1">
                <v-text-field
                  label="邮箱"
                  :rules="emailRules"
                  type="text"
                  required
                ></v-text-field>
              </v-col>
             <v-col cols="12" v-if="diastatus != 1">
                <v-text-field
                  label="验证码"
                  type="text"
                  required
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  label="请输入密码"
                  type="password"
                  counter
                  maxlength="16"
                  required
                ></v-text-field>
              </v-col>

              <v-col cols="12">
                <v-btn color="banzhuan" class="white--text" block @click="submit">
                  {{diastatus == 1 ? "登录" : diastatus == 2 ? "注册" : "重置"}}
                </v-btn>
              </v-col>
              <v-col cols="12" v-if="diastatus != 1" class="pt-2">
                <v-btn color="banzhuan" text class="white--text" block outlined @click="changeDiastatus(1)" >
                  {{diastatus == 2 ? "已有账号，":""}}去登录
                </v-btn>
              </v-col>
            </v-row>
          </v-container>
          <small v-show="diastatus != 3">*注册登录即表示同意 <a href="/"  class="blue--text text-decoration-none">《用户协议》</a>、<a href="/" class="blue--text text-decoration-none">《隐私政策》</a></small>
        </v-card-text>
        <v-card-actions >
          <v-btn color="banzhuan" text @click="changeDiastatus(2)" v-if="diastatus == 1" >
            立即注册
          </v-btn>
          <v-row no-gutters align="center" justify="end" v-if="diastatus == 1">
            <v-btn color="banzhuan" text @click="changeDiastatus(3)" >
              忘记密码
            </v-btn>
          </v-row>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

<script>
export default {
  name: "Login",
  props: {
    isLoginDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialog: false,
      diastatus:1,
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
      ],
    };
  },
  watch: {
    isLoginDialog(val) {
      this.dialog = val;
    }
  },
  methods: {
    closeDialog() {
      this.$emit("changeisLoginDialog",false)
       this.diastatus = 1
    },
    changeDiastatus(status){
      this.diastatus = status

    },
    submit(){
      console.log(this.diastatus)
    }
  },
  created() {
    console.log(this.isLoginDialog);
  }
};
</script>

<style></style>
